<template>
	<!-- 师傅端个人中心 -->
	<view class="center">
		<view class="logo" open-type="userInfo" @click="tologin" :hover-class="!login ? 'logo-hover' : ''">
			<view class="log-center">
				<image class="logo-img" :src="login ? userInfo.avatar :avatarUrl"></image>
				<view class="logo-title" style="font-size: 26rpx;">
					<view>
						<text class="logo-role">{{ getUserInfo(userInfo.is_worker) }}</text>
						<text>{{userInfo.nickname}}</text>
						<uni-rate :readonly="true" :value="5" size="12" />
					</view>
					<view>工时费：<text class="tcolor">{{userInfo.unit_price}}元/小时</text></view>
					<view>累计接单：<text class="tcolor">{{userInfo.total_work_num}}单</text> </view>
					<view class="choose" style="text-align: start;font-size: 26rpx;" @click="jumpTo('/pages/sf/zlbj/zlbj')">
						服务标签:
						<text v-for="(yy,index) in commitList" :key="index"
							style="margin-left: 5rpx;background-color: #09BB07;font-size: 22rpx;padding: 0 5rpx;border-radius: 10rpx;">{{yy.name}}</text>
					</view>
					<!-- <text class="uer-name">{{login ?'Hi,'+ userInfo.nickName : '注册/登录'}}师父</text> -->
				</view>
				<view class="logo-edit" @click="jumpTo('/pages/sf/zlbj/zlbj')">账户编辑</view>
			</view>
		</view>
		<view class="tips" @click="jumpTo('/pages/sf/zlbj/zlbj')">
			<image src="../../../static/zlwcd.png" style="width: 273rpx;height: 45rpx;"></image>
			<text style="color: #007AFF;">{{numbers}}%</text>
		</view>

		<view class="center-list">
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/users/money/index')">
				<image src="../../../static/tbqb.png" class="icon"></text>
					<text class="list-text">通币钱包</text>
					<text class=" iconfont navigat-arrow">&#xe660;</text>
			</view>
			<view class="center-list-item border-bottom" @click="payOrder">
				<image src="../../../static/wdbx.png" class="icon"></text>
					<text class="list-text">接单保证金</text>
					<text class="list-phone"
						:class="userInfo.is_bond===0 ? 'wj':'yj'">{{userInfo.is_bond===0 ? '尚未缴纳保证金' : yj}}</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/sf/htxz/htxz?typelist=0')">
				<image src="../../../static/htxz.png" class="icon"></text>
					<text class="list-text">合同下载</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<!-- </view>
		<view class="center-list"> -->
			<!-- 	<view class="center-list-item border-bottom" @click="jumpTo('/pages/sf/htxz/htxz?typelist=1')">
				<image src="../../../static/wdbx.png" class="icon"></text>
					<text class="list-text">我的保险</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view> -->
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/sf/sbgl/sbgl')">
				<image src="../../../static/sbgl.png" class="icon"></text>
					<text class="list-text">设备台账</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/sf/shopInto/index')">
				<image src="../../../static/sbgl.png" class="icon"></text>
					<text class="list-text">门店录入</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>

			<!-- <view class="center-list-item border-bottom " @click="jumpTo('/pages/users/fatie/index')">
				<image  src="../../../static/ftjl.png" class="icon"></text>
				<text class="list-text">发帖记录</text>
				<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<view class="center-list-item" @click="jumpTo('/pages/users/fankui/index')">
				<image  src="../../../static/wtfk.png" class="icon"></text>
				<text class="list-text">问题反馈</text>
				<text class="navigat-arrow iconfont">&#xe660;</text>
			</view> -->
		</view>

		<view class="center-list">
			<view class="center-list-item border-bottom" @click="jumpTo('/pages/users/yqhy/index')">
				<image src="../../../static/fxtj.png" class="icon"></text>
					<text class="list-text">分享推荐</text>
					<text class=" iconfont navigat-arrow">&#xe660;</text>
			</view>

			<view class="center-list-item border-bottom" @click="callphone">
				<image src="../../../static/lxkf.png" class="icon"></text>
					<text class="list-text">联系客服</text>
					<text class="list-phone">{{kfphone}}</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<!-- </view>
		<view class="center-list"> -->
			<!-- <view class="center-list-item border-bottom" @click="jumpTo('/pages/users/zhongyi/index')">
				<image src="../../../static/zyyx.png" class="icon"></text>
					<text class="list-text">商务合作</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view> -->
			<view class="center-list-item border-bottom " @click="jumpTo('/pages/sf/set/set')">
				<image src="../../../static/shezhi.png" class="icon"></text>
					<text class="list-text">设置</text>
					<text class="navigat-arrow iconfont">&#xe660;</text>
			</view>
			<!-- <view class="center-list-item" @click="jumpTo('/pages/users/fankui/index')">
				<image  src="../../../static/wtfk.png" class="icon"></text>
				<text class="list-text">问题反馈</text>
				<text class="navigat-arrow iconfont">&#xe660;</text>
			</view> -->
		</view>

	</view>
	</view>
</template>

<script>
	import {
		get_openid,
		Login,
		user_info,
		getkefuPhone,
		Deposit,
		getProgress
	} from '../../../api/api.js'
	import uniChcek from '../../../components/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'

	export default {
		components: {
			uniChcek
		},
		props: {
			userInfo: {
				type: Object
			}
		},
		data() {
			return {
				login: false,
				avatarUrl: "http://xiaowen.cool:86/bst/avatar.png",
				statusBarHeight: "",
				numbers: "",
				commitList: [],
				yj: '',
				kfphone: "",
			}
		},
		onShow() {
			this.getProgress()
			console.log('onShOW 个人中心')
		},
		watch: {
			userInfo(now, past) {
				this.getProgress()
				this.userInfo = now,
					console.log('监听变化', now)
			},

		},
		created() {
			let tag = uni.getStorageSync('tag')
			let bb = []
			tag.forEach(item => {
				this.userInfo.worker_type.forEach(vv => {
					console.log('vv', vv)
					if (vv == item.id) {
						item.text = item.name
						item.value = item.id
						bb.push(item)
					}
				})
			})
			this.commitList = bb

			this.statusBarHeight = uni.getStorageSync('statusBarHeight')
			this.login = uni.getStorageSync('login')
			console.log(this.login, '登录状态')
			if (this.login) {
				this.userInfo = uni.getStorageSync('userInfo')
				console.log('师傅端打印信息', this.userInfo)
			}
			this.yj = '已缴纳保证金' + this.userInfo.deposit_money + '元'
			this.getkefuPhone()
		},

		methods: {
			// 获取资料完成度
			getProgress() {
				getProgress().then(res => {
					this.numbers = res.data.progress
					console.log('资料完成度1', this.numbers)
				})
			},
			/**
			 * 支付保险金
			 */
			payOrder() {
				if (this.userInfo.is_bond !== 0) return;
				Deposit().then(res => {
					let data = res.data
					uni.requestPayment({
						appId: data.appId,
						timeStamp: data.timestamp,
						nonceStr: data.nonceStr,
						package: data.package,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							// 支付成功的回调中 创建绘本馆成功
							uni.showToast({
								title: "支付成功！",
								icon: "none"
							})
						},
						fail: function(err) {
							console.log('取消', err)
							uni.showToast({
								title: '支付取消',
								duration: 1500,
								icon: 'none'
							});

							// that.$api.msg('支付取消', 1000);
						}
					})
				})
			},
			// call客服
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.kfphone
				});
			},
			// 获取客服电话
			getkefuPhone() {
				getkefuPhone().then(res => {
					this.kfphone = res.msg
				})
			},
			// 手动授权方法
			onGotUserInfo() {
				let _this = this;
				uni.login({
					success(res) {
						if (res.code) {
							let code = res.code
							let data = _this.$util({
								code
							})
							console.log(data)
							//发起网络请求
							get_openid(data).then(res => {
								// 请求成功后获取openid和session_key
								console.log(_this.userInfo, 'ww')
								let data = {
									openid: res.data.openid,
									nickname: _this.userInfo.nickName,
									image: _this.userInfo.avatarUrl
								}
								let sign = _this.$util(data)
								Login(sign).then(res => {
									_this.userInfo.user_id = res.data.user_id
									let params = {
										user_id: _this.userInfo.user_id,
									}
									let sign = _this.$util(params)
									user_info(sign).then(res => {
										_this.userInfo = res.data
										wx.setStorageSync('userInfo', _this.userInfo);
									})
									uni.showToast({
										icon: "none",
										title: res.msg || '服务操作失败'
									})
								})
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					},
				})
			},
			tologin() {
				if (this.login) return
				const _this = this;
				uni.getUserProfile({
					desc: '用于完善资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						_this.login = true
						_this.onGotUserInfo()
						console.log('用户信息', res.userInfo)
						wx.setStorageSync('userInfo', res.userInfo);
						_this.userInfo = wx.getStorageSync('userInfo', res.userInfo)
						wx.setStorageSync('hasUserInfo', true);
					},
					fail: (err) => {
						console.log('err', err);
					}
				})
				
			},


			// 获取电话号码
			getPhoneNumber(e) {
				this.data1 = e.detail
				console.log(e, e.detail)
				var _that = this;
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') { //用户点击拒绝
					wx.showToast({
						title: '请绑定手机号',
						duration: 5000,
						icon: 'none',
					});
				} else {

					if (this.sex === 'a') {
						uni.showToast({
							icon: 'none',
							title: '请选择性别！',
							duration: 1000
						})
					} else {
						uni.showLoading({
							title: '加载中...',
						})
						if (this.userInfo.phone) {
							setTimeout(() => {
								uni.hideLoading()
								uni.navigateTo({
									url: `/pages/index/index2?isshow=${_that.isshow}`
								})
							}, 500)

						} else {
							uni.login({
								success(res) {
									let code = res.code
									if (res.code) {
										//发起网络请求
										uni.request({
											// 请求路径
											url: 'https://yangzhong.dev.zhangxinkeji.com/api/User/get_openid',
											// 请求参数code
											data: {
												"code": code,
											},
											method: 'POST',
											success(res) {
												// 请求成功后获取openid和session_key
												console.log(res.data.data, 'ww')
												let userkey = res.data.data
												uni.request({
													// 请求路径
													url: 'https://yangzhong.dev.zhangxinkeji.com/api/User/getMobile',
													// 请求参数code
													data: {
														"user_id": userkey.id,
														"session_key": userkey.session_key,
														"iv": _that.data1.iv,
														"encryptedData": _that.data1.encryptedData
													},
													method: 'POST',
													success(res) {
														uni.hideLoading()
														// 请求成功后获取openid和session_key
														uni.navigateTo({
															url: `/pages/index/index2?sex=${_that.sex}`
														})
													}
												})
											}
										})
									} else {
										uni.hideLoading()
										console.log('登录失败！' + res.errMsg)
									}
								},
								fail() {
									uni.hideLoading()
									console.log("获取用户信息失败");
								}
							})
						}
					}
				}

			},

			// 跳转
			jumpTo(e) {
				if (!this.login) {
					this.tologin()
				} else {
					uni.navigateTo({
						url: e
					})
				}

			},
			// 获取用户身份
			getUserInfo(info) {
				if (info === 0) {
					return '未认证'
				} else if (info === 1) {
					return '用户'
				} else if (info === 2) {
					return '师傅'
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.choose {
		width: 100%;
		/* padding: 30rpx 50rpx; */
	}

	@font-face {
		font-family: 'iconfont';
		src: url('//at.alicdn.com/t/font_2620352_7eqv26f7qs6.woff2?t=1624084697158') format('woff2'),
			url('//at.alicdn.com/t/font_2620352_7eqv26f7qs6.woff?t=1624084697158') format('woff'),
			url('//at.alicdn.com/t/font_2620352_7eqv26f7qs6.ttf?t=1624084697158') format('truetype');
	}

	.iconfont {
		font-family: iconfont;
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		/* font-family: texticons; */
		margin-right: 20upx;
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		// background: url('http://xiaowen.cool:86/yjky/yjkybg.png');
		background-size: cover;
		width: 750upx;
		background-position-y: -168rpx;
		height: 210upx;
		padding: 30upx;
		box-sizing: border-box;
		background-color: #029E8E;
		flex-direction: row;
		align-items: center;
	}

	.log-center {
		width: 100%;
		position: relative;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		/* margin-left: 50%; */
		/* transform: translateX(-50%); */
		border-radius: 150upx;
	}

	.logo-title {
		height: 170upx;
		color: #fff;
		display: block;
		/* align-items: center; */
		/* position: absolute; */
		/* top: 250rpx; */
		/* font-size: 26rpx; */
		margin-left: 30upx;
		/* margin-top: 70upx; */
		/* left: 50%;
		/* transform: translateX(-50%); */

		/* flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx; */
	}

	.logo-title view {
		display: flex;
		align-items: center;
	}

	.logo-title view>text {
		margin-right: 5px;
	}

	.logo-title .logo-role {
		font-size: 20rpx;
		color: #007AFF;
		padding: 0 3px;
		background: #fff;
	}

	.logo-edit {
		position: absolute;
		right: -30rpx;
		top: 0;
		font-size: 22rpx;
		padding: 8rpx 24rpx;
		color: #007AFF;
		border-top-left-radius: 27rpx;
		border-bottom-left-radius: 27rpx;
		background: #fff;
	}

	.tcolor {
		color: #FFB400;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		/* width: 750upx; */
		border-radius: 15rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		margin-top: 60upx;
		width: 90%;
		/* border-radius: 30rpx; */
		flex-direction: column;
	}

	.center-list-item {
		height: 90upx;
		/* width: 750upx; */
		box-sizing: border-box;
		margin-top: 20rpx;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #E1E1E1;

		border-bottom-style: solid;
	}

	/* 	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #4cd964;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	} */

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 28rpx;
		margin-left: 10rpx;
		color: #555;
		flex: 1;
		text-align: left;
	}

	.list-phone {
		height: 90upx;
		line-height: 90upx;
		font-size: 26rpx;
		color: #777777;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 30rpx;
		color: #555;
		text-align: right;
		/* font-family: texticons; */
	}

	.icon {
		/* width: 60upx;
		height: 60upx;
		margin-top: 16upx; */
		width: 46rpx;
		height: 46rpx;
		margin: 22rpx 0 0 0;
	}

	.yj {
		color: #09BB07;
	}

	.wj {
		color: red;
	}

	.tips {
		position: absolute;
		top: 200rpx;
		right: 30rpx;
		animation: move 1.5s;

		text {
			position: absolute;
			right: 20rpx;

		}
	}

	@keyframes move {
		0% {
			right: -100rpx;
		}

		100% {
			right: 30rpx;
		}



	}
</style>
